<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="css/demo_table.css">
<link rel="stylesheet" href="css/psecharts.css">
</head>
<body>
	<div id="container">
		<div id="header">
			<ul>
				<li><a href="index.html">Line</a></li>
				<li><a href="candle.html">Candle</a></li>
				<li><a href="reports.html">Report</a></li>
			</ul>

			<ul style="position: absolute; right: 10px; top: -12px;">
				<li>Supported Browsers</li>
				<li><a href="http://www.google.com/chrome">Chrome</a></li>
				<li><a href="http://www.mozilla.com">Firefox 3.5+</a></li>
				<li><a
					href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home">IE8+</a>
				</li>
			</ul>
		</div>

		<div id="content">
			<table id="table_id">
				<thead>
          <tr>
            <th colspan="1">&nbsp</th>
           <c:forEach var="myheader" items="${myHeaders}">
            <th colspan="3"><c:out value="${myheader}"/></th>
           </c:forEach>
          </tr>
					<tr>
            <th>ticker</th>
           <c:forEach var="myheader" items="${myHeaders}">
            <th>price</th>
            <th>%change</th>
            <th>volume</th>
           </c:forEach>
					</tr>
				</thead>
				<tbody>
           <c:forEach var="ticker" items="${tickers}">
					<tr>
            <td><c:out value="${ticker}"/></td>
           <c:forEach var="myheader" items="${myHeaders}">
						<td class="n"><fmt:formatNumber value="${stockUpdates[myheader][ticker].price}" minFractionDigits="2" maxFractionDigits="2" groupingUsed=""/></td>
            <td class="n"><fmt:formatNumber value="${stockUpdates[myheader][ticker].percentChange}" minFractionDigits="2" maxFractionDigits="2" groupingUsed=""/></td>
            <td class="n"><fmt:formatNumber value="${stockUpdates[myheader][ticker].volume}" minFractionDigits="0" maxFractionDigits="2" groupingUsed=""/></td>
           </c:forEach>
					</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>



		<div id="footer">
			<a href="http://code.google.com/p/psecharts/" style="float: left">http://code.google.com/p/psecharts/</a>
			<a href="http://groups.google.com/group/psecharts-discuss"
				style="float: right">http://groups.google.com/group/psecharts-discuss</a>
		</div>
	</div>

	<script>
	$(document).ready(function() {
		var oTable =  $('#table_id').dataTable( {
			  "bPaginate": false,
			  "sScrollX": "100%",
			    "sScrollXInner": "110%"
			  } );
		} );
	</script>
	<script type="text/javascript">
		/*
		 var _gaq = _gaq || [];
		 _gaq.push(['_setAccount', 'UA-16275283-2']);
		 _gaq.push(['_trackPageview']);

		 (function() {
		 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		 })();
		 */
	</script>
</body>
</html>